<template>
	<!-- 人员授权编辑对话框	 -->
	<el-dialog title="特殊人员授权" :visible.sync="isEditable" :center="true" width="98%" @open="opendDialog" @close="closeDialog" :close-on-click-modal="false">
		<!-- 导航栏 -->
		<div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu">{{authorityInfo.name}}</i></el-breadcrumb-item>
                <el-breadcrumb-item>特殊人员授权</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

		<!-- 特殊人员权限表单 -->
		<el-form :inline="true" ref="hummerForm" :model="hummerForm" label-width="120px">
			<el-form-item label="人员名称" :rules="{required: true, message: '请输入人员', trigger: 'change'}" prop="name">
				<el-autocomplete popper-class="hummer-autocomplete" v-model="hummerForm.name" :fetch-suggestions="querySearchAsync" :trigger-on-focus="false" placeholder="请输入人员" @select="handleSelect">
					<template slot-scope="props">
						<div class="lastname">{{props.item.lastname}} - <span class="jobtitle">{{props.item.jobtitle}}</span></div>
					</template>
				</el-autocomplete>
			</el-form-item>

			<el-form-item label="部门" :rules="{required: true, message: '请选择部门', trigger: 'change'}" prop="dept">
				<el-input placeholder="请选择部门" :disabled="true" v-model="hummerForm.dept">
					<el-button slot="append" icon="el-icon-search" @click="departmentTreeDialogEdit"></el-button>
				</el-input>
			</el-form-item>
			
			<el-form-item>
				<el-button type="success" icon="el-icon-arrow-down" plain @click="addInfo('hummerForm')">添加</el-button>
			</el-form-item>

		</el-form>
		<!-- 特殊人员权限表单 End-->
		
		<!-- 特殊人员权限数据表格 -->
		<el-table :data="hummerAuthorityData" border highlight-current-row height="300" size="mini" v-loading="listLoading" :fit="true" :show-overflow-tooltip="true" :stripe="true">
			<el-table-column type="index" align="center" width="35" ></el-table-column>
			<el-table-column prop="name" align="center" label="人员" width="200"></el-table-column>
			<el-table-column label="所查看部门">
				<template scope="scope">
					<span v-show="!scope.row.isedit">{{scope.row.authorityState ? '所有部门' : scope.row.dept}}</span>
					<el-input placeholder="请选择部门" :disabled="true" v-model="scope.row.dept" size="small" v-show="scope.row.isedit">
						<el-button slot="append" icon="el-icon-search" @click="departmentTreeDialogRowEdit(scope.$index, scope.row)"></el-button>
					</el-input>
				</template>
			</el-table-column>
			<!-- 表格操作工具栏 -->
			<el-table-column label="操作" align="center" width="150">
				<template scope="scope">
					<!-- 韩内编辑 -->
					<el-button :type="!scope.row.isedit ? 'primary' : 'success'" size="small" @click="handleRowEdit(scope.$index, scope.row)">{{!scope.row.isedit ? '编辑' : '确定'}}</el-button>	
					<el-button type="info" v-show="scope.row.isedit" size="small" @click="cancelRowEdit(scope.$index, scope.row)">取消</el-button>	

					<!-- 删除提示tooltip -->
					<el-popover ref="popoverDelete" placement="top"  v-model="scope.row.visible">
						<p>确定要删除这条数据吗?</p>
						<div style="text-align: center;">
							<el-button size="mini" type="success" @click="scope.row.visible = false">取消</el-button>
							<el-button size="mini" type="danger" @click="handleRowDel(scope.$index, scope.row)">确定</el-button>
						</div>
						<el-button type="danger" v-show="!scope.row.isedit" size="small" slot="reference" @click="scope.row.visible = true">删除</el-button>
					</el-popover>
				</template>
			</el-table-column>
			<!-- 表格操作工具栏 End-->
		</el-table>
		<!-- 特殊人员权限表格 End-->

		<!-- 对话框底部工具栏 -->
		<span slot="footer" class="dialog-footer">
			<el-button type="info" @click="cancelEdit('hummerForm')">取消</el-button>
			<el-button type="primary" @click="finishedEdit">确定</el-button>
		</span>
		<!-- 对话框底部工具栏 End-->

		<!-- 部门树形弹出框 -->
		<dept-tree-dlg :isShowType.sync="isShowType" v-on:message="getDeptValue" :deptMessage="deptMessage" :checkAllType="checkAllType"></dept-tree-dlg>
		<!-- 部门树形弹出框 End -->

		<!-- 部门树形弹出框 -->
		<dept-tree-dlg :isShowType.sync="isShowRowType" v-on:message="getDeptRowValue" :deptMessage="deptMessage" :checkAllType="checkAllType"></dept-tree-dlg>
		<!-- 部门树形弹出框 End -->
	</el-dialog>
	<!-- 人员授权编辑对话框	End -->
</template>

<script>
	import deptTreeDlg from './departmentTreeDialog.vue'

	export default{
		name: 'hummerAuthorityDialog',
		props: ['isConfigHummer', 'authorityInfo'],
		data(){
			return {
				// 启用编辑
				isEditable: this.isConfigHummer,
				// 权限信息
				info: this.authorityInfo,

				// 启用树形弹出框
				isShowType: false,
				// 启用树形弹出框 - 行内编辑
				isShowRowType: false,
				// 部门树形弹出框初始化数据
				deptMessage: '',
				// 部门树形所有权限状态
				checkAllType: false,

				// 人员权限数据
				hummerAuthorityData: [],
				// 人员权限数据 - 删除缓存副本
				hummerAuthorityDataDeleted: [],

				// 人员权限表单
				hummerForm: {
					id: '',
					name: '',
					hrmId: '',
					dept: '',
					deptId: '',
					authorityState: false,
					deletedType: false,
					isedit: false,
					visible: false,
				},

				// 工具栏表单重置状态
				reset: false,

				// 数据缓存对象
				cacheRows: {},
			}
		},
		components: {
			'dept-tree-dlg': deptTreeDlg
		},
		methods: {
			querySearchAsync: function(queryString, cb){
				this.$http.post('/api/authority/hummer/remoteHummer', {search: queryString}, {emulateJSON: true}).then(response => {
					var result = response.data || [];
					cb(result);
				}, response => {
					console.log('Ajax can not get the data from the server!!!');
				});
			},
			handleSelect: function(item){
				this.hummerForm.name = item.lastname;
				this.hummerForm.hrmId = item.id;
			},
			/* 对话框操作 */
			// 激活对话框处理
			opendDialog: function(){
				this.$http.post('/api/authority/hummer', {authorityId: this.info.id}, {emulateJSON: true}).then(response => {
					 this.hummerAuthorityData = response.data.filter(obj => {
						if (!obj.deletedType){
							return true;
						}
					});
				}, response => {
					console.log('Ajax can not get the data from the server!!!');
				});
			},
			// 关闭对话框->清空数据
			closeDialog: function(){
				this.hummerAuthorityData.splice(0, this.hummerAuthorityData.length);
				this.hummerAuthorityDataDeleted.splice(0, this.hummerAuthorityDataDeleted.length);
			},
			// 查询条件
			filterMethod(query, item){
				return item.label.indexOf(query) > -1;
			},

			// 重置表单
			resetForm: function(){
				this.hummerForm.hrmId = '';
				this.hummerForm.deptId = '';
				this.hummerForm.authorityState = false;
				this.deptMessage = '';
				this.checkAllType = false;
			},

			// 添加人员权限
			addInfo: function(formName){
				this.$refs[formName].validate((valid) => {
					if (valid){
						console.log(valid);
						if (this.hummerAuthorityData.length > 0){
							let isExit = this.hummerAuthorityData.find((item) => {
								if (item.hrmId == this.hummerForm.hrmId){	
									this.$notify({
										title: '警告',
										message: '同一个人员你要添加两次？有意思吗？除非你是ZZ！',
										type: 'warning'
									});
									return true;
								}
							});
							if (!isExit){
								this.hummerAuthorityData.push(JSON.parse(JSON.stringify(this.hummerForm)));
								this.$refs[formName].resetFields();
								this.resetForm();
							}
							return false;
						} else {
							this.hummerAuthorityData.push(JSON.parse(JSON.stringify(this.hummerForm)));
							this.$refs[formName].resetFields();
							this.resetForm();
							return false;
						}
					}
				})				
			},

			// 取消编辑
			cancelEdit: function(){
				this.isEditable = false;
			},
			// 完成编辑
			finishedEdit: function(){
				this.$http.post('/api/authority/hummer/save', {authorityId: this.info.id, hummerAuthorityData: this.hummerAuthorityData.concat(this.hummerAuthorityDataDeleted)}).then(response => {
					this.isEditable = false;
					this.$notify({
						title: '成功',
						message: '数据已成功帮你保存，你可以继续进行你的low操作！',
						type: 'success'
					});
				}, response => {
					this.$notify({
						title: '错误',
						message: '服务器它出问题了，这锅我不背！',
						type: 'error'
					});
					console.log('Ajax can not get the data from the server!!!');
				});
			},
			/* 对话框操作 End*/

			/* 行内编辑 */
			// 编辑行内数据
			handleRowEdit: function(index, row){
				// 缓存操作前数据
				this.cacheRows[index] = JSON.parse(JSON.stringify(row));
				row.isedit = !row.isedit;
			},
			// 取消行内编辑数据
			cancelRowEdit: function(index, row){
				// 获取缓存数据
				var cache = this.cacheRows[index];
				// 还原原始操作数据
				row.dept = cache.dept;
				row.deptId = cache.deptId;
				// 删除缓存数据
				delete this.cacheRows[index];
				row.isedit = false;
			},
			// 删除字段表格数据
			handleRowDel: function(index, row){
				row.visible = false;
				row.deletedType = true;
				// 保留已存在数据库中数据-用于更新删除状态
				row.id && this.hummerAuthorityDataDeleted.push(this.hummerAuthorityData[index]);
				this.hummerAuthorityData.splice(index, 1);
			},
			/* 行内编辑 End*/

			// 激活部门树形选择框
			departmentTreeDialogEdit: function(event){
				this.isShowType = true;
	           	this.deptMessage = this.hummerForm.deptId;
	           	this.checkAllType = this.hummerForm.authorityState;
			},

			// 获得所选部门信息
			getDeptValue: function(deptLabel, deptId, authorityState){
				// 所选部门标签
				this.hummerForm.dept = deptLabel;
				// 所选部门值
				this.hummerForm.deptId = deptId;
				// 全选状态
				this.hummerForm.authorityState = authorityState;
				
			},

			// 激活部门树形选择框-表格行内编辑
			departmentTreeDialogRowEdit: function(index, row){
				this.isShowRowType = true;
            	console.log(row);
            	this.rowIndex = index;
            	this.checkAllType = row.authorityState;
            	this.deptMessage = row.deptId;
			},

			// 获得所选部门行信息
			getDeptRowValue: function(deptLabel, deptId, authorityState){
				// 所选部门标签
				this.hummerAuthorityData[this.rowIndex].dept = deptLabel;
				// 所选部门值
				this.hummerAuthorityData[this.rowIndex].deptId = deptId;
				// 全选状态
				this.hummerAuthorityData[this.rowIndex].authorityState = authorityState;

				// 重置标识
				this.rowIndex = -999;
			}

		},
		watch: {
			// 监听父组件isConfigHummer状态
			'isConfigHummer': function(value){
				this.isEditable = value;
			},
			// 监听父组件authorityInfox信息
			'authorityInfo': function(value){
				this.info = value;
			},
			// 监听子组件isEditable状态
			'isEditable': function(value){
				this.$emit('update:isConfigHummer', value);
			}
		}
	}
</script>

<style>
	.hummer-autocomplete li {
		line-height: normal;
		padding: 7px;
	}
	.hummer-autocomplete li .lastname{
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.hummer-autocomplete li .jobtitle{
		font-size: 12px;
		color: #b4b4b4;
	}
	.hummer-autocomplete li .highlighted.jobtitle{
		color: #ddd;
	}
</style>